import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import Dialog from '@/components/dialog/Index'
import type { AnyObject } from '@/types'
import { getOnekeyList, handleOnekey } from '@/api/insurance/period'
import type { OperateRecordDto } from '@/api/insurance/period/types'
import type { FilterDto } from '@/render/FilterRender'
import { getSaleList } from '@/api/sale'
import { DeptTypeCnEnum, PlatformTypeCnEnum, SalaryStatusCnEnum } from '@/const/enum'
import { getFailReasonList } from '@/api/pay'
import type { SalaryFailReasonDto } from '@/api/pay/types'
import { confirm, downloadFile } from '@/utils/util'
import { Button, message } from 'ant-design-vue'

@Component
export class DialogAutoRenewal extends TableRender {
    @Prop() show!: boolean

    noTablePadding = true
    noFilterPadding = true

    showDialog = false
    showDialogDetail = false
    curItem = {} as OperateRecordDto
    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show')
    handleWatchShow(val: boolean) {
        this.showDialog = val
    }

    @Watch('showDialog')
    handleWatchShowDialog(val: boolean) {
        this.updateShow(val)
    }

    filterConfig() {
        return {
            idCardNo: {
                name: '员工身份证',
                element: 'input'
            },
            phone: {
                name: '手机号',
                element: 'input'
            },
            queryPayDate: {
                name: '手机号',
                element: 'datetime',
                params: {
                    type: 'date',
                    valueFormat: 'YYYY-MM-DD'
                }
            }
        } as FilterDto
    }

    tableConfig() {
        const config = super.tableConfig()
        config.height = '400px'
        return config
    }

    tableColumnConfigOld = () => [
        {
            field: 'userName',
            title: '职工姓名',
        },
        {
            field: 'phone',
            title: '手机号',
            width: 120
        },
        {
            field: 'idCardNo',
            title: '身份证',
            width: 160
        },
        {
            field: 'payTime',
            title: '发薪时间',
            width: 160
        },
        {
            field: 'getSalaryTime',
            title: '领薪时间',
            width: 160
        },
        {
            field: 'projectName',
            title: '所属项目',
            width: 120
        },
        {
            field: 'serveCompanyName',
            title: '所属企业',
            width: 120
        },
        {
            field: 'paymentAmount',
            title: '领薪金额',
        },
        {
            field: 'status',
            title: '操作状态',
            formatter: ({row}) => {
                return SalaryStatusCnEnum[row.status]
            }
        },
        {
            field: 'failReasonMsg',
            title: '原因',
        }
    ] as TableRenderColumnTypes<SalaryFailReasonDto>

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getFailReasonList({
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    onShowDetail(row: OperateRecordDto) {
        this.showDialogDetail = true
        this.curItem = row
    }

    async onRenewal(row: OperateRecordDto) {
        await confirm('是否确认一键续保？', '提示')
        const response = await handleOnekey({
            companyId: row.companyId,
            onekeyEnsureType: row.onekeyEnsureType
        })
        if (response.isEnoughBalance) {
            message.success('一键续保成功')
            this.showDialog = false
        } else {
            message.error('账户余额不充足，续保失败')
        }
    }

    onDownload() {
        const url = 'https://bullet001.oss-cn-shanghai.aliyuncs.com/file/getSalaryFialReason.xlsx'
        downloadFile(url)
    }

    renderRightBtns() {
        return <div>
            <Button type="link" onClick={this.onDownload}>领薪失败原因及解决方法?</Button>
        </div>
    }

    render() {
        return (
            <>
                <Dialog
                    v-model={this.showDialog}
                    title="自动断保客户"
                    width="800px"
                    v-slots={{
                        default: () => {
                            return <div>{super.render()}</div>
                        }
                    }}
                ></Dialog>
            </>
        )
    }
}

export default toNative<{}, {}>(DialogAutoRenewal)
